<template>
 <div id="mine" v-if="userInfo.token">
     <van-nav-bar
      title="我的"
      :fiexd="true"
      :border='false'
     /> 
     <van-cell style="background-color:#2eba5a;color:#fff;margin-top:-0.5rem"
     @click="$router.push('/dashboard/mine/UserCenter')"
     >
      <template slot="title">
       <div class="personMsg">
         <img src="http://2016.qconshanghai.com/sites/default/files/styles/img-single-track/public/%E5%B0%A4%E9%9B%A8%E6%BA%AA.jpg?itok=ptSPJmsi" alt="">
         <div class="personInfo">
           <span>小杨</span>
           <span>手机号:{{userInfo.phone}}</span>
         </div>
       </div>
      </template>
     </van-cell>

  <van-cell-group>
  <van-cell icon='label' title="我的订单" 
  value="查看所有的订单" 
   @click="$router.push({path: '/dashboard/mine/mineOrder'})" is-link/>
  </van-cell>
  </van-cell-group>

  <van-grid>
  <van-grid-item 
   v-for="(order,index) in orderData"
   :key='index'
   :icon='order.icon'
   :text="order.title" />
  </van-grid>
  </van-grid-item>

  <van-cell-group style="margin-top:0.6rem">
  <van-cell icon='label' title="我的优惠券" value="1张"  is-link/>
  <van-cell icon='label' title="我的收货地址"  is-link/>
  </van-cell-group>

 
  <van-cell-group style="margin-top:0.6rem">
  <van-cell icon='label' title="联系客服" value="客服时间07:00-22:00""  is-link/>
  <van-cell icon='label' title="意见反馈" is-link/>
  </van-cell-group>

  <van-cell-group style="margin-top:0.6rem">
  <van-cell icon='label' title="小杨买菜" value="下载APP体验更加"  is-link/>
  </van-cell-group>

<!-- 路由出口 -->
  <transition name="router-slider" mode="out-in"> 
      <router-view></router-view>
    </transition>
 </div> 
  <SelectLogin v-else/>  

    
</template>
<script>
import SelectLogin from './../../views/login/SelectLogin'
import {mapState,mapMutations} from 'vuex'
export default {
    name:"Mine",
    data(){
      return{
        orderData:[
          {icon:'balance-pay',title:'待支付'},
          {icon:'gift-o',title:'待收货'},
          {icon:'smile-comment-o',title:'待评价'},
          {icon:'cash-back-record',title:'售后/退款'}
        ]
      }
    },
    components:{
        SelectLogin
    },
    computed:{
      ...mapState(['userInfo']),
    }
}
</script>

<style scoped>
  #mine{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    }

    .van-nav-bar{
      background-color: #3bba63;
    }
    
    .personMsg{
     display: flex;
     flex-direction: row;
     align-items: center;
    }
    .personMsg>img{
      width: 4rem;
      height: 4rem;
      border-radius: 3rem;
      border: 0.12rem solid #fff;
    }
    .personInfo{
      display:flex;
      flex-direction: column;
      margin-left: 0.8rem;
    }
    .van-cell__left-icon{
      color:orangered;
      font-size: 1.2rem;
    } 
    /*转场动画*/
      .router-slider-enter-active,
      .router-slider-leave-active {
      transition: all 0.3s;
      }
      .router-slider-enter,
      .router-slider-leave-active {
      transform: translate3d(2rem, 0, 0);
      opacity: 0;
      }
</style>